<!--
 * @Date: 2020-01-15 09:41:36
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-05-11 10:59:19
 * @describe: --
 -->
<template>
  <el-dialog :visible.sync="visible" title="房源选择" :modal="false" width="70%">
    <el-form :inline="true" :model="dataForm">
      <el-row>
        <el-col :span="18">
          <el-form-item>
            类型：
            <ren-select v-model="dataForm.houseType" dict-type="houseType" class="FormSelect"></ren-select>
          </el-form-item>
          <el-form-item>
            交易：
            <ren-select
              v-model="dataForm.transactionType"
              dict-type="houseTransactionType"
              class="FormSelect"
            ></ren-select>
          </el-form-item>
          <!-- <el-form-item>
                        状态：
                        <ren-select
                            v-model="dataForm.examine"
                            dict-type="examine"
                            placeholder="审核类型"
                            class="FormSelect"
                        ></ren-select>
                    </el-form-item>
                    <el-form-item>
                        外网同步：
                        <el-select v-model="dataForm.extranet" class="FormSelect">
                            <el-option label="已同步" value="1"></el-option>
                            <el-option label="未同步" value="0"></el-option>
                        </el-select>
          </el-form-item>-->
          <el-form-item>
            区域：
            <el-select
              v-model="dataForm.districtCode"
              placeholder="请选择"
              clearable
              @change="CityRegionChange"
              class="FormSelect"
            >
              <el-option
                v-for="item in this.$store.state.CityRegion"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            商圈：
            <el-select
              v-model="dataForm.business"
              placeholder="请选择"
              :disabled="dataForm.districtCode==''"
              class="FormSelect"
            >
              <el-option
                v-for="item in businessList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <!-- <el-form-item>
                        家具：
                        <el-select v-model="dataForm.furniture" class="FormSelect">
                            <el-option label="没有" value="0"></el-option>
                            <el-option label="有" value="1"></el-option>
                        </el-select>
          </el-form-item>-->
          <el-form-item>
            部门：
            <el-cascader
              class="FormSelect"
              v-model="deptSelectVal"
              :options="this.$store.state.DeptList"
              :show-all-levels="false"
              @change="deptIdChange"
              :props="deptProps"
              ref="myCascader"
            ></el-cascader>
          </el-form-item>
          <!-- <el-form-item>
                        <el-checkbox
                            v-model="dataForm.selfHouse"
                            true-label="1"
                            false-label="0"
                        >我的房源</el-checkbox>
                        <el-checkbox v-model="dataForm.selfDeal" true-label="1" false-label="0">自己成交</el-checkbox>
                        <el-checkbox v-model="dataForm.image" true-label="1" false-label="0">图片</el-checkbox>
          </el-form-item>-->

          <el-form-item>
            楼盘类型：
            <ren-select
              v-model="dataForm.type"
              dict-type="dictType"
              placeholder="楼盘类型"
              class="FormSelect"
            ></ren-select>
          </el-form-item>
          <el-form-item>
            装修：
            <ren-select
              v-model="dataForm.renovation"
              dict-type="dictRenovation"
              placeholder="装修"
              class="FormSelect"
            ></ren-select>
          </el-form-item>

          <el-form-item>
            单价：
            <el-input v-model="dataForm.prices" placeholder="最低价" class="Section_inp"></el-input>
            {{' -'}}
            <el-input v-model="dataForm.pricee" placeholder="最高价" class="Section_inp"></el-input>
          </el-form-item>

          <el-form-item>
            总价：
            <el-input v-model="dataForm.pricess" placeholder="最低价" class="Section_inp"></el-input>
            {{' -'}}
            <el-input v-model="dataForm.pricese" placeholder="最高价" class="Section_inp"></el-input>
          </el-form-item>

          <el-form-item>
            面积：
            <el-input v-model="dataForm.areas" placeholder="最小" class="Section_inp"></el-input>
            {{' -'}}
            <el-input v-model="dataForm.areae" placeholder="最大" class="Section_inp"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="Reset">重置</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          智能：
          <el-input v-model="dataForm.name" placeholder="楼盘名" style="width:30%" clearable></el-input>
          <el-input
            placeholder="请输入内容"
            v-model="dataForm.search"
            class="input-with-select"
            @keyup.enter.native="getDataList"
            clearable
            style="width:50%"
          >
            <el-button slot="append" icon="el-icon-search" @click="getDataList"></el-button>
          </el-input>
        </el-col>
        <!-- <el-col :span="4">
          <el-input
            placeholder="请输入内容"
            v-model="dataForm.dictName"
            class="input-with-select"
            @keyup.enter.native="getDataList"
          >
            <el-select v-model="select_type" slot="prepend" style="width:80px;">
              <el-option label="楼盘名" value="1"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="getDataList"></el-button>
          </el-input>
        </el-col>-->
      </el-row>
    </el-form>
    <el-table
      v-loading="dataListLoading"
      :data="dataList"
      style="width: 100%;"
      height="400"
      border
      stripe
      highlight-current-row
      @row-dblclick="tableRowDbclick"
    >
      <!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> -->
      <el-table-column prop="id" label="编号" header-align="center" align="center" width="100">
        <template slot-scope="scope">{{"FY - "+ scope.row.id.substring(scope.row.id.length-6)}}</template>
      </el-table-column>
      <el-table-column prop="transactionType" label="交易类型" header-align="center" align="center">
        <template slot-scope="scope">
          <span
            :class="scope.row.transactionType==1?'typeColor1':'typeColor2'"
          >{{ $getDictLabel("houseTransactionType", scope.row.transactionType).slice(0,1) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="districtCode"
        label="商圈区域"
        header-align="center"
        align="center"
        width="130"
      >
        <template
          slot-scope="scope"
        >{{ $Dictionaries("CityRegion", scope.row.districtCode) }} - {{ $Dictionaries("BusinessPage", scope.row.business) }}</template>
      </el-table-column>
            <el-table-column
          prop="dictName"
          label="楼盘"
          header-align="center"
          align="center"
          width="130"
        >
          <template slot-scope="scope">
            <span class="font_weight">{{scope.row.dictName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="zdNum"
          label="座栋"
          header-align="center"
          align="center"
          sortable="custom"
          width="70"
        >
          <template slot-scope="scope">{{scope.row.zdNum+' '+scope.row.zdUnit}}</template>
        </el-table-column>
        <el-table-column
          prop="dyNum"
          label="单元"
          header-align="center"
          align="center"
          sortable="custom"
          width="70"
        >
          <template slot-scope="scope">{{scope.row.dyNum+'单元'}}</template>
        </el-table-column>
        <el-table-column
          prop="num"
          label="房号"
          header-align="center"
          align="center"
          sortable="custom"
          width="70"
        ></el-table-column>
      <!-- <el-table-column
        prop="dictName"
        label="楼盘字典"
        header-align="center"
        align="center"
        width="180"
      >
        <template
          slot-scope="scope"
        >{{ scope.row.dictName+' '+scope.row.zdNum+scope.row.zdUnit+' '+scope.row.dyNum+'单元 '+scope.row.num}}</template>
      </el-table-column> -->
      <!-- <el-table-column prop="dyNum" label="单元" header-align="center" align="center"></el-table-column> -->
      <el-table-column
        prop="area"
        label="面积（㎡）"
        header-align="center"
        align="center"
        width="105"
        sortable="custom"
      ></el-table-column>
      <el-table-column
        prop="price"
        label="单价"
        header-align="center"
        align="center"
        width="95"
        sortable="custom"
      ></el-table-column>
      <el-table-column
        prop="prices"
        label="总价"
        header-align="center"
        align="center"
        width="95"
        sortable="custom"
      ></el-table-column>
      <el-table-column prop="type" label="物业类型" header-align="center" align="center">
        <template slot-scope="scope">
          <span
            :style="dictTypeColor(scope.row.type)"
          >{{ $getDictLabel("dictType", scope.row.type) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="maintainName" label="维护人" header-align="center" align="center"></el-table-column>
       <el-table-column prop="deptName" label="维护部门" header-align="center" align="center"></el-table-column>

    </el-table>
    <el-pagination
      :current-page="page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="limit"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="pageSizeChangeHandle"
      @current-change="pageCurrentChangeHandle"
    ></el-pagination>
  </el-dialog>
</template>
<script>
import mixinViewModule from "@/mixins/view-module";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/house/houseinfo/page",
        getDataListIsPage: true
      },
      visible: false,
      dataForm: {
        id: "",
        dictId: "",
        num:"",
        dictName: "",
        houseType: "", //房源类型
        transactionType: "", //交易类型
        examine: "", //审核状态
        extranet: "", //外网同步
        districtCode: "", //行政区域
        business: "", //商圈
        furniture: "", //家具
        deptId: "", //部门
        selfHouse: "0", //我的房源
        selfDeal: "0", //我的成交
        image: "", //图片
        renovation: "", //装修
        type: "", //楼盘类型
        prices: "",
        pricee: "",
        pricess: "",
        pricese: "",
        areas: "",
        areae: "",
        state: "1",
        createDates: "",
        createDatee: "",
        followTimes: "",
        followTimee: "",
        self: "1",
        search: "",
        name: "",
         houseModuleId: "",
      },
      businessList: [],
      select_type: "1",
      deptProps: {
        value: "id",
        label: "name",
        checkStrictly: true
      },
      deptSelectVal: ""
    };
  },
  created() {},
  methods: {
    info() {
      this.visible = true;
    },
    //行政区选择change
    CityRegionChange(val) {
      this.businessList = [];
      this.dataForm.business = "";
      this.$http
        .get(`/dictionary/business/businessList`, {
          params: {
            districtCode: val
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.businessList = res.data;
        })
        .catch(() => {});
    },
    Reset() {
      this.dataForm = {
        id: "",
        name: "",
        search: "",
        houseType: "", //房源类型
        transactionType: "", //交易类型
        examine: "", //审核状态
        extranet: "", //外网同步
        districtCode: "", //行政区域
        business: "", //商圈
        furniture: "", //家具
        deptId: "", //部门
        selfHouse: "0", //我的房源
        selfDeal: "0", //我的成交
        image: "", //图片
        renovation: "", //装修
        type: "", //楼盘类型
        prices: "",
        pricee: "",
        pricess: "",
        pricese: "",
        areas: "",
        state: "1",
        areae: "",
        createDates: "",
        createDatee: "",
        followTimes: "",
        followTimee: "",
        self: "1",
         houseModuleId: "",
      };
    },
    deptIdChange(val) {
      let a = "";
      if (this.$refs.myCascader.getCheckedNodes()[0]) {
        a = this.$refs.myCascader.getCheckedNodes()[0].value;
        this.dataForm.deptId = a;
      } else {
        this.dataForm.deptId = "";
      }
    },
    //行双击
    tableRowDbclick(row) {
      let obj = JSON.parse(JSON.stringify(row));
      obj.houseId = row.id;
      obj.id = null;
      this.$emit("setHousing", obj);
      this.visible = false;
    }
  },
  watch: {
    dataForm: {
      handler(nowVal, oldVal) {
        this.getDataList();
      },
      deep: true
    }
  }
};
</script>
<style scoped>
</style>